<!-- 歌单标签 -->
<template>
	<view>
		<view class="labels" v-for="(item,index) in content" :key="index">
			<view class="label-title"><text>{{item.title}}</text></view>
			<view class="label-body">
				<view class="label-item" v-for="(label,i) in item.body" :key="label.name" @click="toSong_sheet(label.name)">
					<text>{{label.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapGetters} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		methods:{
			...mapActions('song_sheet',['GetPlaylistAllLabel']),
			
			// 跳转到歌单广场页页
			toSong_sheet(name) {
				uni.navigateTo({
					url:`/pages/song_sheet/song_sheet?name=${name}`
				})
			},
		},
		computed:{
			...mapGetters('song_sheet',['content'])
		},
		onLoad() {
			this.GetPlaylistAllLabel().then(value=>{
				console.log(this.content);
			})
		}
	}
</script>

<style lang="scss">
	.labels {
		margin-bottom: 50rpx;

		.label-title {
			margin-bottom: 30rpx;

			text {
				opacity: 0.8;
				font-size: 30rpx;
			}
		}

		.label-body {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.label-item {
				height: 30rpx;
				width: 20%;
				padding: 20rpx 10rpx;
				background-color: #1f1f1f;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15rpx;
				margin-bottom: 20rpx;

				text {
					opacity: 0.8;
					font-size: 25rpx;
				}
			}
		}
	}
</style>
